<template>

  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>中继服务设置</span>
       </div>
        <div>
          <el-form ref="relayForm" :model="relayForm" label-width="120px" :rules="rules">

            <el-form-item label="启用">
              <el-switch
                v-model="relayForm.relayEnable"
                active-value="1"
                inactive-value="0"
                >
              </el-switch>
            </el-form-item>

            <el-form-item label="IP" prop="relayDomain">
              <el-input v-model="relayForm.relayDomain" placeholder="请输入IP" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="中转服务端口" prop="relayPort">
              <el-input v-model="relayForm.relayPort" placeholder="请输入中转服务端口" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="穿透服务端口" prop="piercePort">
              <el-input v-model="relayForm.piercePort" placeholder="请输入穿透服务端口" autocomplete="off"></el-input>
            </el-form-item>

<!--            <el-form-item label="中转服务账号" prop="relayUsername">
              <el-input v-model="relayForm.relayUsername" placeholder="请输入中转服务账号" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="中转服务密码" prop="relayPassword">
              <el-input v-model="relayForm.relayPassword" placeholder="请输入中转服务密码" autocomplete="off"></el-input>
            </el-form-item> -->

          </el-form>
        </div>
        <div style="border-top: 1px solid #e6ebf5;padding-top: 16px;">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-button type="danger" round plain icon="el-icon-warning"  @click="restartRelay"   :loading="loading">重启服务</el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="text-align: right;">
                <el-button type="primary" round plain icon="el-icon-refresh-right" @click="submitForm" :loading="loading">更新</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
    </el-card>

  </div>

</template>
<script>

  import {
    getConfig,
    saveConfig
  } from '@/api/cloud/config'

  import {
    restartRelay
  } from '@/api/cloud/server'

  import {
    isOk
  } from '@/utils/request'



  export default {
    name: 'RelayServerConfig',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        loading:false,
        relayForm:{
          relayEnable:"",
          relayDomain:"",
          relayPort:"",
          piercePort:"",
          relayUsername:"",
          relayPassword:""
        },
        rules: {
          relayDomain: [{
            required: true,
            message: '请输入IP',
            trigger: 'blur'
          }],
          relayPort: [{
            required: true,
            message: '请输入中转服务端口',
            trigger: 'blur'
          }],
          piercePort: [{
            required: true,
            message: '请输入穿透服务端口',
            trigger: 'blur'
          }],
          relayUsername: [{
            required: true,
            message: '请输入中转服务账号',
            trigger: 'blur'
          }],
          relayPassword: [{
            required: true,
            message: '请输入中转服务密码',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getConfig();
    },
    methods:{
      getConfig(){
        this.loading=true
        getConfig().then(response => {
          this.loading=false
          if(isOk(response)){
            const _data=response.result;
            this.relayForm.relayEnable=_data.relayEnable
            this.relayForm.relayDomain=_data.relayDomain
            this.relayForm.relayPort=_data.relayPort
            this.relayForm.piercePort=_data.piercePort
            this.relayForm.relayUsername=_data.relayUsername
            this.relayForm.relayPassword=_data.relayPassword
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      restartRelay(){
        this.$confirm('重启会释放正在连接用户，确认重启吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading=true
          restartRelay().then(response => {
            this.loading=false
            if(isOk(response)){
              this.$message({
                type: 'success',
                message:response.message
              })
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
      submitForm: function() {
        this.$refs.relayForm.validate((valid) => {
          if (valid) {
            this.loading = true
            saveConfig(this.relayForm).then(rsp => {
              this.$message({
                type: 'success',
                message:rsp.message
              })
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
    }
  }

</script>

<style>
</style>
